<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>commodity</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/commodity.css">
</head>

<body>
    <div class="header wrapper">
        <div class="logo">
            <h1><a href=""><img src="images/2.jpg_.webp" alt=""></a></h1>
        </div>
        <div class="contain">
            <h3>清华大学出版社</h3>
            <div class="logo2">
                <img src="./images/3.png_.png" alt="">
            </div>
        </div>
        <!-- 评分 -->
        <div class="score">
            <div class="text"><span>4</span></div>
            <div class="grade"><span>⭐⭐⭐⭐</span></div>
        </div>
        <!-- 发货时间 -->
        <div class="time">
            <span>平均15小时发货</span>
        </div>
        <!-- 客服 -->
        <div class="time">
            <span>客服平均51秒回复</span>
        </div>
        <div class="time">
            <span>商品体验优秀</span>
        </div>
        <!-- 商品体验 -->
        <div class="ri">
            <div class="contact">
                <div class="lin">
                </div>
                <strong>
                    <a href=""> 联系客服</a>
                </strong> 
           
            </div>
            <div class="contact">
                <div class="lin2">
                </div>
                <strong>
                    <a href="">进入店铺</a>
                </strong>
            </div>
        </div>
    </div>
    <div class="body wrapper">
        <div class="bd">
            <a href="">
                <img src="images/3.jpg_.avif" alt="">
            </a>
        </div>
        <!-- 商品的具体信息 -->
        <div class="as">
            <h1>数据结构 从概念到C实现 第2版 第二版 王红梅(含作业册) 新时代高等学校计算机类专业教材书籍 清华大学出版社 9787302615682正版</h1>
            <span>已售 999+</span>
            <div><strong>￥899</strong></div>
            <div class="address">
                <span>配&emsp;送:&emsp;</span>
                <em>湖北武汉&emsp;至&emsp;长春工业大学</em>
            </div>
            <div class="address">
                <span>保&emsp;障:&emsp;</span>
                <em>假一赔四&emsp;退货运费险&emsp;7天无理由退换</em>
            </div>
            <div class="address">
                <span>科&emsp;目:&emsp;</span>
                <em>数据结构&emsp;从概念到C实现&emsp;第二版&emsp;王红梅</em>
            </div>
            <div class="address">
                <span>数&emsp;量:&emsp;</span>
                <div class="cal">
                    <button id="sub"> - </button>
                    <input id="text"  type="text" value="1">
                    <button id="add">+</button>
                    <span>有货</span>
                </div>
            </div>
            <div class="buy">
                <button id="bu">立即购买</button>
                <button id="car">加入购物车</button>
            </div>
        </div>
        <div class="comment">
            <a href="discuss.html"><em>用户评论</em></a>
          
           
        </div>
    </div>
</body>
<script>
    // 实现订单数量的+1 -1 操作
 document.addEventListener('DOMContentLoaded', function() {
    var addButton = document.getElementById('add');
    var subButton = document.getElementById('sub');
    var text = document.getElementById('text');

    addButton.addEventListener('click', function() {
        var currentQuantity = parseInt(text.value, 10);
        currentQuantity = isNaN(currentQuantity) ? 0 : currentQuantity;
        text.value = currentQuantity + 1;
    });

    subButton.addEventListener('click', function() {
        var currentQuantity = parseInt(text.value, 10);
        if (currentQuantity > 0) {
            text.value = currentQuantity - 1;
        }
    });
});

</script>

</html>